<template>
  <div class="index">
    <!-- 欢迎登录，我是index页面 -->
    <el-container class="index_container">
      <el-header>
        <Header />
      </el-header>
      <el-container>
        <el-aside :width="foldMenuFlag? '200px':'60px'">
          <div class="fold">
               <span class="iconfont icon-zuoyouduiqi" @click="foldBtn"></span>
          </div>
          <div>
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#373b41"
              text-color="#fff"
              active-text-color="#ffd04b"
              :collapse="!foldMenuFlag"
              :collapse-transition="false">
              <el-submenu
                :index="item.path + ''"
                v-for="item in routes"
                :key="item.path"
              >
                <!-- 动态封装路由 -->
                 <template v-if="!item.children">
                  <div slot="title" @click="menuUpSingle(item)" >
                    <i class="el-icon-menu"></i>
                    <span>{{ item.meta.title }}</span>
                  </div>
                </template>
                <!-- 关键代码 -->
                <template v-else>
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{ item.meta.title }}</span>
                  </template>
                  <el-menu-item
                    v-for="items in item.children"
                    :key="items.path"
                    :index="'/' + items.path"
                    @click="menuUp(items)"
                  >
                    <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>{{ items.meta.title }}</span>
                    </template> 
                  </el-menu-item>
                </template>
              </el-submenu>
            </el-menu>
          </div>
        </el-aside>
        <el-main class="scrollbar-sty">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from '@/components/Header/header.vue'
import { createRoute } from '@/router/index'
export default {
    data() {
        return {
          foldMenuFlag:true
        }
    },
    components:{
      Header
    },
    watch:{

    },
    computed:{
      routes() {
        return createRoute()
      },
    },
    created() {
      console.log(createRoute());
    },
    mounted() {

    },
    methods: {
        //折叠
        foldBtn() {
          this.foldMenuFlag = !this.foldMenuFlag
        },
        menuUp(item) {
          console.log(item);
          this.$router.push({
            path:item.path
          })
        },
        menuUpSingle(item) {
          console.log(item);
          this.$router.push({
            path:item.path
          })
        }
    }
}
</script>

<style lang="less" scoped>
.index {
  height: 100%;
  width: 100%;
}
.index_container {
  height: 100%;
  // height:calc(100vh - 60px);
}
.el-header {
  padding: 0;
  background-color: rgb(99,1,239);
}
.el-aside {
  transition: width 0.5s;
  background-color: #373b41;
  .fold {
    height: 30px;
    border-bottom: 1px solid #000;
    .icon-zuoyouduiqi {
      float: right;
      cursor: pointer;
      line-height: 30px;
    }
  }
}
.el-main {
height:calc(100vh - 60px);
}
  .el-menu {
    height: 1px;
    border-right: none;
  }
</style>